<template>
  <el-dialog
    ref="refDlg"
    title="变更明细确认单"
    :visible.sync="dialogShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="closeDialog"
    width="800px"
    @close="closeDialog"
  >
    <div>
      <div v-loading="dataLoading">
        <c-section title="设计需求变更申请结果">
          <c-list :column="3">
            <c-list-item label="门店" :span="2" :value="formData.shopName" />
            <c-list-item label="门店城市级别" dict-type-code="CITY_LEVEL" :value="formData.shopCityLevel||'暂无'" />
            <c-list-item label="所属客户" :span="3" :value="formData.clientName" />
            <c-list-item label="所属办事处" :value="formData.officeName" />
            <c-list-item label="门店类型" dict-type-code="SHOP_TYPE" :value="formData.shopType " />
            <c-list-item label="门店业务类型" dict-type-code="BIZ_TYPE" :value="formData.shopBizType||'暂无'" />
            <c-list-item label="门店详细地址" :span="3" :value="formData.shopAddress||'暂无'" />
            <c-list-item label="门店建设项目号" :value="formData.constCode||'暂无'" />
            <c-list-item label="变更申请人" :value="formData.createBy||'暂无'" />
            <c-list-item label="变更申请时间" :value="formData.createTime||'暂无'" />
            <c-list-item label="变更说明" :span="3" :value="formData.changeDesc||'暂无'" />
            <c-list-item label="是否重复设计" :value="formData.isRedesign===1?'是':'否'" />
            <c-list-item label="重复设计原因" dict-type-code="REDESIGN_REASON" :value="formData.redesignReason||'暂无'" />
          </c-list>
        </c-section>
        <c-section title="设计基础信息变更记录">
          <div>
            <table-box
              ref="refTable"
              table-size="mini"
              :data="changeDetailList"
              :table-config="tableConfig"
              :table-height="100"
              show-index
            />
          </div>
        </c-section>
        <c-section title="设计区域及面积变更记录">
          <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="软体" name="Q014">
              <el-table
                :row-class-name="tableRowClassName"
                :data="softTableData"
                style="width: 100%"
              >
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <div style="width:90%;margin:20px 30px">
                      <el-table
                        :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
                        show-overflow-tooltip
                        border
                        :data="props.row.group"
                        style="width: 100%"
                      >
                        <el-table-column prop="styleName" label="所属专区" />
                        <el-table-column prop="adviceArea" label="建议面积" />
                        <el-table-column prop="seriesName" label="产品系列" />
                        <el-table-column prop="detailChangeType" label="方案变更明细">
                          <template slot-scope="scope">{{ formaterData(changeTypeOptions,scope.row.detailChangeType) }}</template>
                        </el-table-column>
                        <el-table-column prop="beforeVaule" label="变更前实际报图面积">
                          <template slot-scope="scope">{{ !scope.row.beforeVaule?0:scope.row.beforeVaule }}</template>
                        </el-table-column>
                        <el-table-column prop="afterVaule" label="变更后实际报图面积">
                          <template slot-scope="scope">{{ !scope.row.afterVaule?0:scope.row.afterVaule }}</template>
                        </el-table-column>
                        <el-table-column prop="seriesDesc" width="150" show-overflow-tooltip label="系列说明" />
                        <el-table-column prop="isMustUp" label="是否必上">
                          <template slot-scope="scope">{{ scope.row.isMustUp?'是':'否' }}</template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="所属空间" prop="spaceName" />
                <el-table-column prop="changeType" label="变更类型">
                  <template slot-scope="scope">{{ formaterData(changeTypeOptions,scope.row.changeType) }}</template>
                </el-table-column>
                <el-table-column label="空间说明" width="150" show-overflow-tooltip prop="spaceDesc" />
                <el-table-column label="建议上样面积" prop="adviceSampleArea" />
                <el-table-column prop="beforeActualAreaSum" label="变更前实际报图面积" />
                <el-table-column prop="afterActualAreaSum" label="变更后实际报图面积" />

              </el-table>
            </el-tab-pane>
            <el-tab-pane label="成品套房" name="Q015">
              <el-table
                :row-class-name="tableRowClassName"
                :data="productTableData"
                style="width: 100%"
              >
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <div style="width:90%;margin:20px 30px">
                      <el-table
                        :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
                        show-overflow-tooltip
                        border
                        :data="props.row.group"
                        style="width: 100%"
                      >
                        <el-table-column prop="styleName" label="所属专区" />
                        <el-table-column prop="adviceArea" label="建议面积" />
                        <el-table-column prop="seriesName" label="产品系列" />
                        <el-table-column prop="detailChangeType" label="方案变更明细">
                          <template slot-scope="scope">{{ formaterData(changeTypeOptions,scope.row.detailChangeType) }}</template>
                        </el-table-column>
                        <el-table-column prop="chooseCustomizedSeriesName" label="配套定制系列" />
                        <el-table-column prop="chooseCupboardSeriesName" label="配套橱柜系列" />
                        <el-table-column prop="beforeVaule" label="变更前实际报图面积">
                          <template slot-scope="scope">{{ !scope.row.beforeVaule?0:scope.row.beforeVaule }}</template>
                        </el-table-column>
                        <el-table-column prop="afterVaule" label="变更后实际报图面积">
                          <template slot-scope="scope">{{ !scope.row.afterVaule?0:scope.row.afterVaule }}</template>
                        </el-table-column>
                        <el-table-column prop="seriesDesc" width="150" show-overflow-tooltip label="系列说明" />
                        <el-table-column prop="isMustUp" label="是否必上">
                          <template slot-scope="scope">{{ scope.row.isMustUp?'是':'否' }}</template>
                        </el-table-column>
                        <el-table-column prop="enable" label="启用状态">
                          <template slot-scope="scope">{{ scope.row.enable?'启用':'停用' }}</template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="所属空间" prop="spaceName" />
                <el-table-column prop="changeType" label="变更类型">
                  <template slot-scope="scope">{{ formaterData(changeTypeOptions,scope.row.changeType) }}</template>
                </el-table-column>
                <el-table-column label="空间说明" width="150" show-overflow-tooltip prop="spaceDesc" />
                <el-table-column label="建议上样面积" prop="adviceSampleArea" />
                <el-table-column prop="beforeActualAreaSum" label="变更前实际报图面积" />
                <el-table-column prop="afterActualAreaSum" label="变更后实际报图面积" />
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="全屋定制" name="Q002">
              <el-table
                :row-class-name="tableRowClassName"
                :data="customizedTableData"
                style="width: 100%"
              >
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <div style="width:90%;margin:20px 30px">
                      <el-table
                        :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
                        show-overflow-tooltip
                        :data="props.row.group"
                        style="width: 100%"
                      >
                        <el-table-column prop="styleName" label="所属专区" />
                        <el-table-column prop="seriesName" label="产品系列" />
                        <el-table-column prop="assortEndProductSeriesName" label="配套成品系列" />
                        <el-table-column prop="adviceFirstSampleSpace" label="推荐首选上样空间">
                          <template slot-scope="scope">{{ formaterData(adviceSampleSpaceOptions,scope.row.adviceFirstSampleSpace) }}</template>
                        </el-table-column>
                        <el-table-column prop="adviceSecondSampleSpace" label="推荐次选上样空间">
                          <template slot-scope="scope">{{ formaterData(adviceSampleSpaceOptions,scope.row.adviceSecondSampleSpace) }}</template>
                        </el-table-column>
                        <el-table-column prop="detailChangeType" label="方案变更明细">
                          <template slot-scope="scope">{{ formaterData(changeTypeOptions,scope.row.detailChangeType) }}</template>
                        </el-table-column>
                        <el-table-column prop="beforeActureApplySampleSpace" label="变更前申请上样空间">
                          <template slot-scope="scope">{{ formaterData(adviceSampleSpaceOptions,scope.row.beforeActureApplySampleSpace) }}</template>
                        </el-table-column>
                        <el-table-column prop="afterActureApplySampleSpace" label="变更后申请上样空间">
                          <template slot-scope="scope">{{ formaterData(adviceSampleSpaceOptions,scope.row.afterActureApplySampleSpace) }}</template>
                        </el-table-column>
                        <el-table-column prop="cabinetColorName" label="变更后柜体颜色" />
                        <el-table-column prop="doorColorName" label="变更后门板颜色" />

                        <el-table-column prop="recommendLevel" label="系列推荐级别">
                          <template slot-scope="scope">{{ formaterData(recommendLevelOptions,scope.row.recommendLevel||scope.row.seriesRecommendedLevel) }}</template>
                        </el-table-column>
                        <el-table-column prop="seriesStandardColor" width="150" show-overflow-tooltip label="系列标配色" />
                        <el-table-column prop="isMustUp" label="是否必上">
                          <template slot-scope="scope">{{ scope.row.isMustUp?'是':'否' }}</template>
                        </el-table-column>
                        <el-table-column prop="seriesDesc" width="150" show-overflow-tooltip label="系列说明" />
                      </el-table>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="所属空间" prop="spaceName" />
                <el-table-column prop="changeType" label="变更类型">
                  <template slot-scope="scope">{{ formaterData(changeTypeOptions,scope.row.changeType) }}</template>
                </el-table-column>
                <el-table-column label="空间说明" width="150" show-overflow-tooltip prop="spaceDesc" />
                <el-table-column label="建议上样面积" prop="adviceSampleArea" />
                <el-table-column label="变更前实际报图面积" prop="beforeVaule" />
                <el-table-column label="变更后实际报图面积" prop="afterVaule" />

              </el-table>
            </el-tab-pane>
            <el-tab-pane label="整体橱柜" name="Q003">
              <el-table
                :row-class-name="tableRowClassName"
                :data="cupboardTableData"
                style="width: 100%"
              >
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <div style="width:90%;margin:20px 30px">
                      <el-table
                        :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
                        show-overflow-tooltip
                        :data="props.row.group"
                        style="width: 100%"
                      >
                        <el-table-column prop="styleName" label="所属专区" />
                        <el-table-column prop="seriesName" label="产品系列" />
                        <el-table-column prop="sampleRecommendLevel" label="上样推荐层级">
                          <template slot-scope="scope">{{ formaterData(sampleRecommendLevelOptions,scope.row.sampleRecommendLevel) }}</template>
                        </el-table-column>
                        <!-- <el-table-column prop="recommendFirstDesignWay" label="推荐首选设计方式">
                          <template slot-scope="scope">{{ formaterData(designWayOptions,scope.row.recommendFirstDesignWay) }}</template>
                        </el-table-column>
                        <el-table-column prop="recommendSecondDesignWay" label="推荐次选设计方式">
                          <template slot-scope="scope">{{ formaterData(designWayOptions,scope.row.recommendSecondDesignWay) }}</template>
                        </el-table-column> -->
                        <el-table-column prop="detailChangeType" label="方案变更明细">
                          <template slot-scope="scope">{{ formaterData(changeTypeOptions,scope.row.detailChangeType) }}</template>
                        </el-table-column>
                        <!-- <el-table-column prop="beforeActualApplySampleWay" label="变更前实际上样方式">
                          <template slot-scope="scope">{{ formaterData(designWayOptions,scope.row.beforeActualApplySampleWay) }}</template>
                        </el-table-column>

                        <el-table-column prop="afterActualApplySampleWay" label="变更后实际上样方式">
                          <template slot-scope="scope">{{ formaterData(designWayOptions,scope.row.afterActualApplySampleWay) }}</template>
                        </el-table-column> -->
                        <el-table-column prop="material" label="材质" />
                        <el-table-column prop="marketPosition" label="市场定位">
                          <template slot-scope="scope">{{ formaterData(marketPositionOptions,scope.row.marketPosition) }}</template>
                        </el-table-column>
                        <el-table-column prop="sampleCode" label="样品编码" />
                        <el-table-column prop="styleForm" label="款式形态">
                          <template slot-scope="scope">{{ formaterData(styleFormOptions,scope.row.styleForm) }}</template>
                        </el-table-column>
                        <el-table-column prop="isMustUp" label="是否必上">
                          <template slot-scope="scope">{{ scope.row.isMustUp?'是':'否' }}</template>
                        </el-table-column>
                        <el-table-column prop="recommendLevel" label="系列推荐级别">
                          <template slot-scope="scope">{{ formaterData(recommendLevelOptions,scope.row.recommendLevel||scope.row.seriesRecommendedLevel) }}</template>
                        </el-table-column>
                        <el-table-column prop="seriesDesc" width="150" show-overflow-tooltip label="系列说明" />
                      </el-table>

                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="所属空间" prop="spaceName" />
                <el-table-column label="适用设计方式" prop="suitDesignWay">
                  <template slot-scope="scope">{{ formaterData(designWayOptions,scope.row.suitDesignWay) }}</template>
                </el-table-column>
                <el-table-column prop="changeType" label="变更类型">
                  <template slot-scope="scope">{{ formaterData(changeTypeOptions,scope.row.changeType) }}</template>
                </el-table-column>
                <el-table-column label="变更前申请设计方式" prop="beforeCurrentApplyDesignWay">
                  <template slot-scope="scope">{{ formaterData(designWayOptions,scope.row.beforeCurrentApplyDesignWay) }}</template>
                </el-table-column>
                <el-table-column label="变更后申请设计方式" prop="afterCurrentApplyDesignWay">
                  <template slot-scope="scope">{{ formaterData(designWayOptions,scope.row.afterCurrentApplyDesignWay) }}</template>
                </el-table-column>
                <el-table-column label="空间说明" width="150" show-overflow-tooltip prop="spaceDesc" />
                <el-table-column label="建议上样面积" prop="adviceSampleArea" />
                <el-table-column prop="beforeVaule" label="变更前实际报图面积">
                  <template slot-scope="scope">{{ !scope.row.beforeVaule?0:scope.row.beforeVaule }}</template>
                </el-table-column>
                <el-table-column prop="afterVaule" label="变更后实际报图面积">
                  <template slot-scope="scope">{{ !scope.row.afterVaule?0:scope.row.afterVaule }}</template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="卫浴" name="Q004">
              <el-table
                :row-class-name="tableRowClassName"
                :data="bathroomTableData"
                style="width: 100%"
              >
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <div style="width:90%;margin:20px 30px">
                      <el-table
                        :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
                        show-overflow-tooltip
                        :data="props.row.group"
                        style="width: 100%"
                      >
                        <el-table-column prop="suitDesignWay" label="适用设计方式">
                          <template slot-scope="scope">{{ formaterData(designWayOptions,scope.row.suitDesignWay) }}</template>
                        </el-table-column>
                        <el-table-column prop="styleName" label="所属专区" />
                        <el-table-column prop="seriesName" label="产品系列" />
                        <el-table-column prop="detailChangeType" label="方案变更明细">
                          <template slot-scope="scope">{{ formaterData(changeTypeOptions,scope.row.detailChangeType) }}</template>
                        </el-table-column>
                        <el-table-column prop="beforeVaule" label="变更前实际报图面积">
                          <template slot-scope="scope">{{ !scope.row.beforeVaule?0:scope.row.beforeVaule }}</template>
                        </el-table-column>
                        <el-table-column prop="afterVaule" label="变更后实际报图面积">
                          <template slot-scope="scope">{{ !scope.row.afterVaule?0:scope.row.afterVaule }}</template>
                        </el-table-column>
                        <el-table-column prop="isMustUp" label="是否必上">
                          <template slot-scope="scope">{{ scope.row.isMustUp?'是':'否' }}</template>
                        </el-table-column>
                        <el-table-column prop="seriesDesc" width="150" show-overflow-tooltip label="系列说明" />
                      </el-table>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="所属空间" prop="spaceName" />
                <el-table-column prop="changeType" label="变更类型">
                  <template slot-scope="scope">{{ formaterData(changeTypeOptions,scope.row.changeType) }}</template>
                </el-table-column>
                <el-table-column label="空间说明" width="150" show-overflow-tooltip prop="spaceDesc" />
                <el-table-column label="建议上样面积" prop="adviceSampleArea" />
                <el-table-column prop="beforeSumArea" label="变更前实际报图面积" />
                <el-table-column prop="afterSumArea" label="变更后实际报图面积" />
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="样板间" name="Q005">
              <el-table
                :row-class-name="tableRowClassName"
                :data="modelTableData"
                style="width: 100%"
              >
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <div style="width:90%;margin:20px 30px">
                      <el-table
                        :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
                        show-overflow-tooltip
                        :data="props.row.group"
                        style="width: 100%"
                      >
                        <el-table-column prop="seriesName" label="产品系列" />
                        <el-table-column prop="sampleFunctionSpace" label="上样功能空间">
                          <template slot-scope="scope">{{ formaterData(adviceSampleSpaceOptions,scope.row.sampleFunctionSpace) }}</template>
                        </el-table-column>
                        <el-table-column prop="assortCupboardSeriesName" label="橱柜系列" />
                        <el-table-column prop="bathRoomSeriesName" label="卫浴系列" />
                        <el-table-column prop="detailChangeType" label="方案变更明细">
                          <template slot-scope="scope">{{ formaterData(changeTypeOptions,scope.row.detailChangeType) }}</template>
                        </el-table-column>
                        <el-table-column prop="isMustUp" label="是否必上">
                          <template slot-scope="scope">{{ scope.row.isMustUp?'是':'否' }}</template>
                        </el-table-column>
                        <el-table-column prop="seriesDesc" width="150" show-overflow-tooltip label="系列说明" />
                      </el-table>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="所属空间" prop="spaceName" />
                <el-table-column prop="changeType" label="变更类型">
                  <template slot-scope="scope">{{ formaterData(changeTypeOptions,scope.row.changeType) }}</template>
                </el-table-column>
                <el-table-column label="风格描述" prop="styleDesc" />
                <el-table-column label="户型" prop="houseType">
                  <template slot-scope="scope">{{ formaterData(houseTypeOptions,scope.row.houseType) }}</template>
                </el-table-column>
                <el-table-column label="户型定位" prop="houseTypePosition">
                  <template slot-scope="scope">{{ formaterData(housePositionOptions,scope.row.houseTypePosition) }}</template>
                </el-table-column>
                <el-table-column label="建议上样面积" prop="adviceSampleArea" />
                <el-table-column label="空间说明" width="150" show-overflow-tooltip prop="spaceDesc" />
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="情景间" name="Q019">
              <el-table
                :row-class-name="tableRowClassName"
                :data="sceneTableData"
                style="width: 100%"
              >
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <div style="width:90%;margin:20px 30px">
                      <el-table
                        :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
                        show-overflow-tooltip
                        :data="props.row.group"
                        style="width: 100%"
                      >
                        <el-table-column prop="styleName" label="所属专区" />
                        <el-table-column prop="seriesName" label="产品系列" />
                        <el-table-column prop="sampleFunctionSpace" label="上样功能空间">
                          <template slot-scope="scope">{{ formaterData(adviceSampleSpaceOptions,scope.row.sampleFunctionSpace) }}</template>
                        </el-table-column>
                        <el-table-column prop="customizedProductDesc" width="150" show-overflow-tooltip label="定制产品说明">
                          <template slot-scope="scope">{{ scope.row.customizedProductDesc|| scope.row.customProductDesc }}</template>
                        </el-table-column>
                        <el-table-column prop="assortEndProductDesc" width="150" show-overflow-tooltip label="配套成品说明" />
                        <el-table-column prop="referenceArea" label="参考面积" />
                        <el-table-column prop="detailChangeType" label="方案变更明细">
                          <template slot-scope="scope">{{ formaterData(changeTypeOptions,scope.row.detailChangeType) }}</template>
                        </el-table-column>
                        <el-table-column prop="isMustUp" label="是否必上">
                          <template slot-scope="scope">{{ scope.row.isMustUp?'是':'否' }}</template>
                        </el-table-column>
                        <el-table-column prop="seriesDesc" width="150" show-overflow-tooltip label="系列说明" />
                      </el-table>
                    </div>

                  </template>
                </el-table-column>
                <el-table-column label="所属空间" prop="spaceName" />
                <el-table-column prop="changeType" label="变更类型">
                  <template slot-scope="scope">{{ formaterData(changeTypeOptions,scope.row.changeType) }}</template>
                </el-table-column>
                <el-table-column label="空间说明" width="150" show-overflow-tooltip prop="spaceDesc" />
                <el-table-column label="变更前实际报图面积" prop="beforeVaule" />
                <el-table-column label="变更后实际报图面积" prop="afterVaule" />
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </c-section>
      </div>
    </div>
    <div slot="footer">
      <el-button size="mini" @click="closeDialog">取消</el-button>
      <el-button size="mini" :loading="saveLoading" type="primary" @click="handleSubmitComfire">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getAreaList } from '@/api/common'
import { getDictByPatchType } from '@/api/dataDict'
import { getDictByType } from '@/api/dataDict'
import { preserveAndCommit } from '@/api/shopDesignChange'
import { getDetail } from '@/api/shopDesignChange'
import { formaterData } from '@/utils'

export default {
  name: 'SubmitDesignConfirm',
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },

    changeId: {
      type: String,
      default: ''
    },

    submitComfireForm: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      id: '',
      formaterData,
      adviceSampleSpaceOptions: [],
      changeTypeOptions: [], // 变更类型
      recommendLevelOptions: [], // 推荐级别
      designWayOptions: [], // 适用设计方式
      marketPositionOptions: [], // 市场定位
      styleFormOptions: [], // 款式形态
      housePositionOptions: [], // 户型定位
      houseTypeOptions: [], // 户型
      sampleRecommendLevelOptions: [], // 推荐层级
      changeDetailList: [],
      activeName: 'Q014',
      softTableData: [],
      customizedTableData: [],
      cupboardTableData: [],
      bathroomTableData: [],
      modelTableData: [],
      productTableData: [],
      sceneTableData: [],
      tableData: [],
      formData: {},
      areaList: [],
      tableConfig: {
        hideFuncBar: true,
        tabIndex: 0,
        // 表格字段动态配置
        setting: [
          {
            prop: 'fieldName',
            label: '更改字段',
            minWidth: '140'
          },
          {
            prop: 'beforeContent',
            label: '变更前值',
            minWidth: '150'
          },
          {
            prop: 'afterContent',
            label: '变更后值',
            minWidth: '140'
          }
        ] },
      dataLoading: false,
      saveLoading: false
    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created() {
    this.getDict()
    this.getAreaSelect()
    this.getChangeData()
  },

  methods: {
    getAreaSelect() {
      getAreaList().then(res => {
        if (res.success === 1) this.areaList = res.data.records
      })
    },
    async   getDict() {
      const { SAMPLE_FUNCTION_SPACE, DESIGN_CHANGE_TYPE, RECOMMEND_LEVEL, SUIT_DESIGN_WAY, MARKET_POSITION, STYLE_FORM, HOUSE_TYPE_POSITION, HOUSE_TYPE, SAMPLE_RECOMMEND_LEVEL } =
       await getDictByPatchType(['SAMPLE_FUNCTION_SPACE', 'DESIGN_CHANGE_TYPE', 'RECOMMEND_LEVEL', 'SUIT_DESIGN_WAY', 'MARKET_POSITION', 'STYLE_FORM', 'HOUSE_TYPE_POSITION', 'HOUSE_TYPE', 'SAMPLE_RECOMMEND_LEVEL'])
      this.adviceSampleSpaceOptions = SAMPLE_FUNCTION_SPACE// 推荐上样空间
      this.changeTypeOptions = DESIGN_CHANGE_TYPE
      this.recommendLevelOptions = RECOMMEND_LEVEL
      this.designWayOptions = SUIT_DESIGN_WAY
      this.marketPositionOptions = MARKET_POSITION
      this.styleFormOptions = STYLE_FORM
      this.housePositionOptions = HOUSE_TYPE_POSITION
      this.houseTypeOptions = HOUSE_TYPE
      this.sampleRecommendLevelOptions = SAMPLE_RECOMMEND_LEVEL
    },
    sortArr(arr, str) {
      var sortArr = []
      var newArr = []
      // 临时的变量
      var tmp
      // 按照特定的参数将数组排序将具有相同值得排在一起
      arr = arr.sort(function(a, b) {
        var s = a[str]
        var t = b[str]
        return s < t ? -1 : 1
      })
      if (arr.length) {
        tmp = arr[0][str]
      }
      for (var i in arr) {
        if (arr[i][str] === tmp) {
          newArr.push(arr[i])
        } else {
          tmp = arr[i][str]
          sortArr.push(newArr)
          newArr = [arr[i]]
        }
      }
      sortArr.push(newArr)
      if (sortArr.length === 1 && sortArr[0].length === 0) return []
      else return sortArr
    },
    tableRowClassName({ row, rowIndex }) {
      return 'selected-highlight'
    },
    // 数据字典格式化数据
    async switchDict(dictTypeCode, value) {
      if (!dictTypeCode || !value) return value
      const dictData = await getDictByType(dictTypeCode)
      const v = /^\d+$/.test(value) ? value.toString().split(',') : value.split(',')
      const str = []
      for (const item of dictData) {
        if (v.includes(item.dictCode)) {
          str.push(item.dictName)
        }
      }
      return str.join(',')
    },
    async  handleSubmitComfire() {
      this.saveLoading = true
      preserveAndCommit(this.submitComfireForm).then(res => {
        this.saveLoading = false
        if (res.success === 1) {
          this.$message.success('提交成功')
          this.closeDialog()
          this.$emit('success', !!this.submitComfireForm.id)
          this.saveLoading = false
        }
      }).catch(() => {
        this.saveLoading = false
      })
    },
    closeDialog() {
      this.dialogShow = false
      this.clearForm()
    },
    clearForm(done) {
      this.tableData = []
      this.formData = {}
    },
    // 数据字典格式化数据
    formaterArea(arr, value) {
      if (!value || !arr) {
        return value || ''
      }
      let list = []
      if (typeof (value) === 'string') {
        list = value.split(',')
      } else {
        list = value
      }
      const temp = []
      arr.forEach((item) => {
        const flag = list.some(v => v === item.areaCode)
        if (flag) {
          temp.push(item.areaName)
        }
      })
      return temp.toString() || value
    },
    getChangeData() {
      if (this.changeId) {
        this.dataLoading = true
        getDetail(this.changeId).then(res => {
          if (res.success === 1 && res.data) {
            this.dataLoading = false
            this.formData = res.data
            this.changeDetailList = res.data.designChangeBaseDetailList
            this.changeDetailList.forEach(el => {
              if (el.fieldName.includes('面积')) {
                el.beforeContent = el.beforeContent ? el.beforeContent + '㎡' : '0㎡'
                el.afterContent = el.afterContent ? el.afterContent + '㎡' : '0㎡'
              }

              if (el.codeType && el.codeType !== 'WHETHER' && el.fieldCode !== 'applySpecialZone') {
                this.switchDict(el.codeType, el.beforeContent).then(res => {
                  el.beforeContent = res
                })
                this.switchDict(el.codeType, el.afterContent).then(res => {
                  el.afterContent = res
                })
              }
              if (el.fieldName.includes('是否')) {
                if (el.beforeContent === '1' || el.beforeContent === '0') {
                  el.beforeContent === '1' ? el.beforeContent = '是' : el.beforeContent = '否'
                } else el.beforeContent === ''
                if (el.afterContent === '1' || el.afterContent === '0') {
                  el.afterContent === '1' ? el.afterContent = '是' : el.afterContent = '否'
                } else el.afterContent === ''
              }

              if (el.fieldCode === 'applySpecialZone') {
                el.beforeContent = this.formaterArea(this.areaList, el.beforeContent)
                el.afterContent = this.formaterArea(this.areaList, el.afterContent)
              }
            })
            let customizedArr = []
            let cupboardArr = []
            let bathroomArr = []
            let modelArr = []
            let softArr = []
            let productArr = []
            let sceneArr = []
            res.data.designChangeAreaSeriesDTOList.forEach(el => {
              if (el.areaCode === 'Q002') customizedArr.push(el)
              if (el.areaCode === 'Q003') cupboardArr.push(el)
              if (el.areaCode === 'Q004') bathroomArr.push(el)
              if (el.areaCode === 'Q005') modelArr.push(el)
              if (el.areaCode === 'Q014') softArr.push(el)
              if (el.areaCode === 'Q015') productArr.push(el)
              if (el.areaCode === 'Q019') sceneArr.push(el)
            })

            customizedArr = this.sortArr(customizedArr, 'spaceName')
            cupboardArr = this.sortArr(cupboardArr, 'spaceName')
            bathroomArr = this.sortArr(bathroomArr, 'spaceName')
            modelArr = this.sortArr(modelArr, 'spaceName')
            softArr = this.sortArr(softArr, 'spaceName')
            productArr = this.sortArr(productArr, 'spaceName')
            sceneArr = this.sortArr(sceneArr, 'spaceName')
            // 卫浴
            bathroomArr.forEach(item => {
              const obj = {
                spaceName: item[0].spaceName,
                suitDesignWay: item[0].suitDesignWay,
                changeType: item[0].changeType,
                spaceDesc: item[0].spaceDesc,
                seriesName: item[0].seriesName,
                seriesCode: item[0].seriesCode,
                adviceSampleArea: item[0].adviceSampleArea,
                afterSumArea: item[0].afterSumArea,
                beforeSumArea: item[0].beforeSumArea,
                group: item
              }
              this.bathroomTableData.push(obj)
            })
            // 情景间
            sceneArr.forEach(item => {
              const obj = {
                spaceName: item[0].spaceName,
                changeType: item[0].changeType,
                spaceDesc: item[0].spaceDesc,
                beforeVaule: item[0].beforeVaule || 0,
                afterVaule: item[0].afterVaule || 0,
                group: item
              }
              this.sceneTableData.push(obj)
            })
            // 样板间
            modelArr.forEach(item => {
              const obj = {
                spaceName: item[0].spaceName,
                changeType: item[0].changeType,
                styleDesc: item[0].styleDesc,
                houseType: item[0].houseType,
                adviceSampleArea: item[0].adviceSampleArea,
                houseTypePosition: item[0].houseTypePosition,
                spaceDesc: item[0].spaceDesc,
                group: item
              }
              this.modelTableData.push(obj)
            })
            // 全屋定制
            customizedArr.forEach(item => {
              const obj = {
                spaceName: item[0].spaceName,
                changeType: item[0].changeType,
                spaceDesc: item[0].spaceDesc,
                adviceSampleArea: item[0].adviceSampleArea,
                beforeVaule: item[0].beforeVaule,
                afterVaule: item[0].afterVaule,
                group: item
              }
              this.customizedTableData.push(obj)
            })
            // 橱柜
            cupboardArr.forEach(item => {
              const obj = {
                spaceName: item[0].spaceName,
                suitDesignWay: item[0].suitDesignWay,
                changeType: item[0].changeType,
                // beforeCurrentApplyDesignWay: item[0].beforeCurrentApplyDesignWay,
                // afterCurrentApplyDesignWay: item[0].afterCurrentApplyDesignWay,
                spaceDesc: item[0].spaceDesc,
                adviceSampleArea: item[0].adviceSampleArea,
                beforeVaule: item[0].beforeVaule, // 变更前实际报图面积
                afterVaule: item[0].afterVaule, // 变更后实际报图面积
                group: item
              }
              this.cupboardTableData.push(obj)
            })

            // 软体
            softArr.forEach(item => {
              let beforeSoftAreaSum = 0
              let afterSoftAreaSum = 0
              item.forEach(v => {
                afterSoftAreaSum = afterSoftAreaSum + Number(v.afterVaule || 0)
                beforeSoftAreaSum = beforeSoftAreaSum + Number(v.beforeVaule || 0)
              })
              const obj = {
                spaceName: item[0].spaceName,
                changeType: item[0].changeType,
                spaceDesc: item[0].spaceDesc,
                afterActualAreaSum: afterSoftAreaSum,
                beforeActualAreaSum: beforeSoftAreaSum,
                adviceSampleArea: item[0].adviceSampleArea,
                group: item
              }
              this.softTableData.push(obj)
            })

            // 套房成品
            productArr.forEach(item => {
              let beforeProductAreaSum = 0
              let afterProductAreaSum = 0
              item.forEach(v => {
                beforeProductAreaSum = beforeProductAreaSum + Number(v.beforeVaule || 0)
                afterProductAreaSum = afterProductAreaSum + Number(v.afterVaule || 0)
              })
              const obj = {
                spaceName: item[0].spaceName,
                changeType: item[0].changeType,
                spaceDesc: item[0].spaceDesc,
                afterActualAreaSum: afterProductAreaSum,
                beforeActualAreaSum: beforeProductAreaSum,
                adviceSampleArea: item[0].adviceSampleArea,
                beforeApplyArea: item[0].beforeApplyArea,
                afterApplyArea: item[0].afterApplyArea,
                group: item
              }
              this.productTableData.push(obj)
            })
            this.$forceUpdate()
          }
        }).catch(() => {
          this.dataLoading = false
        })
      }
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
